<template>
	<view class="merchant-detail-layout">
		<!-- 商户信息 -->
		<view class="merchant-detail-card">
			<image class="merchant-detail-card-icon" src="/static/operate/agent_photo.png" mode="aspectFit"></image>
			<view class="merchant-detail-card-content">
				<text>{{jsonData.merchantName}}</text>
				<view class="merchant-detail-card-content-cell">
					<text>{{jsonData.merchantNo}}</text>
					<image src="/static/home/copy_white.png" mode="aspectFit" @tap="copyMerchantNo"></image>
				</view>
				<text class="merchant-detail-card-content-time">{{dayjs(jsonData.registrationDate).format('YYYY-MM-DD')}} 认证</text>
				<view class="merchant-detail-card-content-cell">
					<text>{{jsonData.tel}}</text>
					<image src="/static/home/phone_white_icon.png" mode="aspectFit" @tap="callPhone"></image>
				</view>
			</view>
			
		</view>
		<!-- 当月交易额 -->
		<view class="merchant-detail-money-box">
			<image src="/static/home/current_month_money_icon.png" mode="aspectFit"></image>
			<text>当月交易额</text>
			<text>{{jsonData.monthAmount}}</text>
			<text style="margin-left: auto;color: #1890FF;font-size: 24rpx;" @tap="lookTrandeRecord">查看明细</text>
		</view>
		<!-- 机具信息 -->
		<view class="merchant-detail-device-info">
			<image class="merchant-detail-device-info-icon" src="/static/home/device_list_icon.png" mode="aspectFit"></image>
			<view class="merchant-detail-device-info-container">
				<view class="merchant-detail-device-info-top">
					<text>{{jsonData.deviceName}}</text>
					<view class="merchant-detail-device-info-top-tag" :class="[jsonData.activeStatus == '1' ? 'unactive-tag' : '']">{{jsonData.activeStatus == '1' ? '已激活' : '未激活'}}</view>
					<text style="margin-left: auto;color: #1890FF;font-size: 24rpx;flex-shrink: 0;" @tap="lookPolicy">查看政策</text>
				</view>
				<view class="merchant-detail-device-info-sn">
					<text>{{jsonData.deviceNo}}</text>
					<image src="/static/my/my_copy.png" mode="aspectFit" @tap="copyKsnNo"></image>
				</view>
				<text class="merchant-detail-device-info-time">绑定时间：{{jsonData.bindDate}}</text>
			</view>
		</view>
		<!-- 交易费率 -->
		<view class="merchant-detail-header">
			<text>交易费率</text>
			<text v-if="formParams.operateStatus == '1'" @tap="showEditRate">修改费率</text>
		</view>
		<view class="policy-config-form">
			<view class="policy-config-form-item" v-for="(item,index) in formParams.rateList" :key="index">
				<text>{{item.retaName}}</text>
				<text>{{item.value}}{{item.payTypeCode == '0' ? '元' : '%'}}</text>
				<view class="line policy-config-form-item-line"></view>
			</view>
		</view>
		<view class="policy-config-form-item policy-config-form-item-md" v-if="singleRateModel">
			<text>秒到提现费</text>
			<text>{{singleRateModel.value}}元/笔</text>
		</view>
	</view>
</template>

<script setup>
	import { onShow } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import dayjs from 'dayjs'
	import { getMerchantRate } from '@/common/api/api.js'
	
	const props = defineProps(['data'])
	const jsonData = JSON.parse(decodeURIComponent(props.data || '{}'))
	console.log(jsonData)
	
	const rateInfo = ref({
		rateInfoList: []
	})
	const formParams = ref({
		//0 未配置 1 已配置
		rateStatus: '',
		// 是否有修改费率的权限
		operateStatus:'0',
		// 机具费率列表
		rateList: []
	})
	// 单笔秒到提现费
	const singleRateModel = ref(null)
	
	// 复制商户编号
	const copyMerchantNo = ()=>{
		uni.$utils.copy(jsonData.merchantNo)
	}
	//复制机具号
	const copyKsnNo = ()=>{
		uni.$utils.copy(jsonData.deviceNo)
	}
	// 拨打电话
	const callPhone = ()=>{
		uni.makePhoneCall({
			phoneNumber:jsonData.tel
		})
	}
	// 查看交易明细
	const lookTrandeRecord = ()=>{
		uni.navigateTo({
			url:`/pages/home/merchant-manager/merchant-list/merchant-detail/merchant-detail-trade-record/merchant-detail-trade-record?merId=${jsonData.merchantId}`
		})
	}
	// 查看政策
	const lookPolicy = ()=>{
		uni.navigateTo({
			url:`/pages/home/device-manager/device-list/device-detail/device-detail?data=${props.data}`
		})
	}
	// 修改费率
	const showEditRate = ()=>{
		uni.navigateTo({
			url:`/pages/home/device-manager/device-list/device-detail/device-rate/device-rate?data=${props.data}`
		})
	}
	// 获取商户费率
	const getMerchantRateData = async () => {
		let params = {}
		params.ksnNo = jsonData.deviceNo
		params.merId = jsonData.merchantId
		const res = await getMerchantRate(params)
		const data = res.result
		rateInfo.value = data
		formParams.value.rateStatus = data.rateStatus || '0'
		//是否具有修改费率的权限 0：无 1：有
		formParams.value.operateStatus = data.operateStatus || '0'
		//渠道类型chnlType：KDB：开店宝 HKD：必达，只有必达的才可以修改云闪付费率
		const chnlType = data.chnlType
		const list = data.rateInfoList
		formParams.value.rateList = []
		list.forEach(obj => {
			if(obj.payTypeCode == 'creditpay'){
				obj.value = obj.mercCreditCardRate
			}
			else{
				obj.value = obj.mercDebitCardRate
			}
			obj.inputValue = obj.value
			formParams.value.rateList.push(obj)
			if (obj.payTypeCode == 'debitpay') {
				let model = {}
				model.retaName = '借记卡封顶'
				model.payTypeCode = '0'
				model.mercDebitCardTop = obj.mercDebitCardTop
				model.debitCardTopMin = obj.debitCardTopMin
				model.debitCardTopMax = obj.debitCardTopMax
				model.value = obj.mercDebitCardTop
				model.inputValue = model.value
				formParams.value.rateList.push(model)
			}
			if (obj.payTypeCode == 'creditpay') {
				let model = {}
				model.retaName = '秒到提现费'
				model.payTypeCode = '1'
				model.singleT0CostMin = obj.singleT0CostMin
				model.singleT0CostMax = obj.singleT0CostMax
				model.mercSingleT0Cost = obj.mercSingleT0Cost
				model.value = obj.mercSingleT0Cost
				model.inputValue = model.value
				singleRateModel.value = model
			}
		})
	}
	onShow(()=>{
		getMerchantRateData()
	})
</script>

<style lang="scss" scoped>
	.merchant-detail-layout{
		padding: 30rpx;
		.merchant-detail-card{
			background-image: url('/static/operate/yy_byjy_bg@2x.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			padding: 30rpx;
			.merchant-detail-card-icon{
				width: 128rpx;
				height: 128rpx;
				flex-shrink: 0;
			}
			.merchant-detail-card-content{
				display: flex;
				flex-direction: column;
				color: #fff;
				font-size: 26rpx;
				margin-left: 20rpx;
				flex: 1;
				text{
					font-size: 28rpx;
				}
				.merchant-detail-card-content-time{
					font-size: 26rpx;
				}
				.merchant-detail-card-content-cell{
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #fff;
					text{
						font-size: 26rpx;
					}
					image{
						width: 30rpx;
						height: 30rpx;
					}
					&:nth-of-type(1){
						margin: 10rpx 0;
					}
					&:nth-of-type(2){
						margin-top: 10rpx;
					}
				}
			}
		}
		.merchant-detail-money-box{
			display: flex;
			align-items: center;
			background-color: #fff;
			margin-top: 30rpx;
			border-radius: 16rpx;
			padding: 30rpx;
			image{
				width: 48rpx;
				height: 48rpx;
			}
			text:nth-of-type(1){
				margin-left: 20rpx;
			}
			text:nth-of-type(2){
				margin-left: 10rpx;
				color: $xh-orange-color;
			}
		}
		.merchant-detail-device-info{
			display: flex;
			align-items: center;
			background-color: #fff;
			margin-top: 30rpx;
			border-radius: 16rpx;
			padding: 30rpx;
			.merchant-detail-device-info-icon{
				width: 80rpx;
				height: 80rpx;
				flex-shrink: 0;
			}
			.merchant-detail-device-info-container{
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
				flex: 1;
				.merchant-detail-device-info-top{
					display: flex;
					align-items: center;
					font-size: 26rpx;
					.merchant-detail-device-info-top-tag{
						background-color: #ff0203;
						color: #ffffff;
						font-size: 22rpx;
						height: 36rpx;
						line-height: 36rpx;
						padding: 0 12rpx;
						border-radius: 18rpx;
						margin-left: 10rpx;
					}
					.unactive-tag{
						background-color: #008000;
					}
				}
				.merchant-detail-device-info-sn{
					display: flex;
					align-items: center;
					color: $xh-color-9;
					font-size: 24rpx;
					margin: 10rpx 0;
					image{
						width: 36rpx;
						height: 36rpx;
					}
				}
				.merchant-detail-device-info-time{
					color: $xh-color-9;
					font-size: 24rpx;
				}
			}
		}
		.merchant-detail-header{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 0;
			text:nth-child(1){
				font-size: 30rpx;
				font-weight: bold;
			}
			text:nth-child(2){
				color: #1890FF;
				font-size: 24rpx;
			}
		}
		.policy-config-form {
			background-color: #fff;
			border-radius: 20rpx;
		}
		.policy-config-form-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			position: relative;
			font-size: 26rpx;
			.policy-config-form-item-line {
				left: 30rpx;
				right: 30rpx;
			}
			text:nth-of-type(1) {
				flex-shrink: 0;
			}
			text:nth-of-type(2) {
				flex-shrink: 0;
				color: $xh-color-9;
			}
		}
		.policy-config-form-item-md{
			margin-top: 30rpx;
			border-radius: 20rpx;
			background-color: #fff;
		}
	}
</style>
